---
title: Tailwind CSS all componenets
description: Customise your web projects with our easy-to-use Navbar component for Tailwind CSS using Material Design guidelines.
github: Navbar
prev: docs/react/inputs
next: docs/react/Navbar-group
---

# Tailwind CSS Accordion - Material Tailwind v3

## Accordion Demo

<PreviewWithCode relativePath="accordion/accordion-demo.tsx" language="html-all" />

## Accordion All Open

<PreviewWithCode relativePath="accordion/accordion-all-open.tsx" language="html-all" />

## Controlled Accordion

<PreviewWithCode relativePath="accordion/controlled-accordion.tsx" language="html-all" />

## Accordion Custom Icon

<PreviewWithCode relativePath="accordion/accordion-custom-icon.tsx" language="html-all" />

## Accordion Custom Styles

<PreviewWithCode relativePath="accordion/accordion-custom-styles.tsx" language="html-all" />

## Accordion Disabled

<PreviewWithCode relativePath="accordion/accordion-disabled.tsx" language="html-all" />

# Tailwind CSS Alert - Material Tailwind

## Alert Demo

<PreviewWithCode relativePath="alert/alert-demo.tsx" language="html-all" />

## Alert Variants

<PreviewWithCode relativePath="alert/alert-variants.tsx" language="html-all" />

## Alert Colors

<PreviewWithCode relativePath="alert/alert-colors.tsx" language="html-all" />

## Alert Icon

<PreviewWithCode relativePath="alert/alert-icon.tsx" language="html-all" />

## Alert with List

<PreviewWithCode relativePath="alert/alert-with-list.tsx" language="html-all" />

## Alert Dismissible

<PreviewWithCode relativePath="alert/alert-dismissible.tsx" language="html-all" />

## Alert Custom Close Icon

<PreviewWithCode relativePath="alert/alert-custom-close-icon.tsx" language="html-all" />

## Alert with Content

<PreviewWithCode relativePath="alert/alert-with-content.tsx" language="html-all" />

## Alert Custom Styles

<PreviewWithCode relativePath="alert/alert-custom-styles.tsx" language="html-all" />

# Tailwind CSS Avatar - Material Tailwind

## Avatar Demo

<PreviewWithCode relativePath="avatar/avatar-demo.tsx" language="html-all" />

## Avatar Variants

<PreviewWithCode relativePath="avatar/avatar-variants.tsx" language="html-all" />

## Avatar Sizes

<PreviewWithCode relativePath="avatar/avatar-sizes.tsx" language="html-all" />

## Avatar with Text

<PreviewWithCode relativePath="avatar/avatar-with-text.tsx" language="html-all" />

## Avatar Stack

<PreviewWithCode relativePath="avatar/avatar-stack.tsx" language="html-all" />

## Avatar Custom Styles

<PreviewWithCode relativePath="avatar/avatar-custom-styles.tsx" language="html-all" />

# Tailwind CSS Badge - Material Tailwind

## Badge Demo

<PreviewWithCode relativePath="badge/badge-demo.tsx" language="html-all" />

## Badge Colors

<PreviewWithCode relativePath="badge/badge-colors.tsx" language="html-all" />

## Badge Placement

<PreviewWithCode relativePath="badge/badge-placement.tsx" language="html-all" />

## Badge Dot

<PreviewWithCode relativePath="badge/badge-dot.tsx" language="html-all" />

## Badge Overlap

<PreviewWithCode relativePath="badge/badge-overlap.tsx" language="html-all" />

## Badge with Border

<PreviewWithCode relativePath="badge/badge-with-border.tsx" language="html-all" />

## Badge Custom Styles

<PreviewWithCode relativePath="badge/badge-custom-styles.tsx" language="html-all" />

# Tailwind CSS Breadcrumbs - Material Tailwind

## Breadcrumb Demo

<PreviewWithCode relativePath="breadcrumb/breadcrumb-demo.tsx" language="html-all" />

## Breadcrumb With Icon

<PreviewWithCode relativePath="breadcrumb/breadcrumb-with-icon.tsx" language="html-all" />

## Breadcrumb Custom Separator

<PreviewWithCode relativePath="breadcrumb/breadcrumb-custom-separator.tsx" language="html-all" />

## Breadcrumb Custom Styles

<PreviewWithCode relativePath="breadcrumb/breadcrumb-custom-styles.tsx" language="html-all" />

# Tailwind CSS Button Group Examples - Material Tailwind

## Button Group Demo

<PreviewWithCode relativePath="button-group/button-group-demo.tsx" language="html-all" />

## Button Group Variants

<PreviewWithCode relativePath="button-group/button-group-variants.tsx" language="html-all" />

## Button Group Sizes

<PreviewWithCode relativePath="button-group/button-group-sizes.tsx" language="html-all" />

## Button Group Colors

<PreviewWithCode relativePath="button-group/button-group-colors.tsx" language="html-all" />

## Button Group With Icon

<PreviewWithCode relativePath="button-group/button-group-with-icon.tsx" language="html-all" />

## Block Level Button Group

<PreviewWithCode relativePath="button-group/block-level-button-group.tsx" language="html-all" />

## Pill Button Group

<PreviewWithCode relativePath="button-group/pill-button-group.tsx" language="html-all" />

## Custom Button Group

<PreviewWithCode relativePath="button-group/custom-button-group.tsx" language="html-all" />

# Tailwind CSS Button - Material Tailwind

## Button Demo

<PreviewWithCode relativePath="button/button-demo.tsx" language="html-all" />

## Button Variants

<PreviewWithCode relativePath="button/button-variants.tsx" language="html-all" />

## Button Sizes

<PreviewWithCode relativePath="button/button-sizes.tsx" language="html-all" />

## Button Colors

<PreviewWithCode relativePath="button/button-colors.tsx" language="html-all" />

## Button With Icon

<PreviewWithCode relativePath="button/button-with-icon.tsx" language="html-all" />

## Block Level Button

<PreviewWithCode relativePath="button/block-level-button.tsx" language="html-all" />

## Pill Button

<PreviewWithCode relativePath="button/pill-button.tsx" language="html-all" />

## Button As Link

<PreviewWithCode relativePath="button/button-as-link.tsx" language="html-all" />

## Button with Loading State

<PreviewWithCode relativePath="button/button-loading.tsx" language="html-all" />

## Custom Auth Button

<PreviewWithCode relativePath="button/custom-auth-button.tsx" language="html-all" />

# Tailwind CSS Card - Material Tailwind

## Card Demo

<PreviewWithCode relativePath="card/card-demo.tsx" language="html-all" />

## Simple Card

<PreviewWithCode relativePath="card/simple-card.tsx" language="html-all" />

## Card with Link

<PreviewWithCode relativePath="card/card-with-link.tsx" language="html-all" />

## Profile Card

<PreviewWithCode relativePath="card/profile-card.tsx" language="html-all" />

## Login Card

<PreviewWithCode relativePath="card/login-card.tsx" language="html-all" />

## Pricing Card

<PreviewWithCode relativePath="card/pricing-card.tsx" language="html-all" />

## Blog Card

<PreviewWithCode relativePath="card/blog-card.tsx" language="html-all" />

## Background Blog Card

<PreviewWithCode relativePath="card/background-blog-card.tsx" language="html-all" />

## Booking Card

<PreviewWithCode relativePath="card/booking-card.tsx" language="html-all" />

## Testimonial Card

<PreviewWithCode relativePath="card/testimonial-card.tsx" language="html-all" />

## Horizontal Card

<PreviewWithCode relativePath="card/horizontal-card.tsx" language="html-all" />

## Ecommerce Card

<PreviewWithCode relativePath="card/ecommerce-card.tsx" language="html-all" />

# Tailwind CSS Checkbox - Material Tailwind

## Checkbox Demo

<PreviewWithCode relativePath="checkbox/checkbox-demo.tsx" language="html-all" />

## Checkbox Colors

<PreviewWithCode relativePath="checkbox/checkbox-colors.tsx" language="html-all" />

## Checkbox with Label

<PreviewWithCode relativePath="checkbox/checkbox-with-label.tsx" language="html-all" />

## Checkbox with Custom Icon

<PreviewWithCode relativePath="checkbox/checkbox-with-custom-icon.tsx" language="html-all" />

## Disabled Checkbox

<PreviewWithCode relativePath="checkbox/disabled-checkbox.tsx" language="html-all" />

## Checkbox with Link

<PreviewWithCode relativePath="checkbox/checkbox-with-link.tsx" language="html-all" />

## Checkbox With Description

<PreviewWithCode relativePath="checkbox/checkbox-with-description.tsx" language="html-all" />

## Checkbox Custom Styles

<PreviewWithCode relativePath="checkbox/custom-checkbox.tsx" language="html-all" />

# Tailwind CSS Chip - Material Tailwind

## Chip Demo

<PreviewWithCode relativePath="chip/chip-demo.tsx" language="html-all" />

## Chip Sizes

<PreviewWithCode relativePath="chip/chip-sizes.tsx" language="html-all" />

## Chip Variants

<PreviewWithCode relativePath="chip/chip-variants.tsx" language="html-all" />

## Chip Colors

<PreviewWithCode relativePath="chip/chip-colors.tsx" language="html-all" />

## Chip Icon

<PreviewWithCode relativePath="chip/chip-icon.tsx" language="html-all" />

## Chip Dismissible

<PreviewWithCode relativePath="chip/chip-dismissible.tsx" language="html-all" />

## Chip with Avatar

<PreviewWithCode relativePath="chip/chip-with-avatar.tsx" language="html-all" />

# Tailwind CSS Footer - Material Tailwind

## Footer Demo

<PreviewWithCode relativePath="footer/footer-demo.tsx" language="html-all" />

## Footer with Logo

<PreviewWithCode relativePath="footer/footer-with-logo.tsx" language="html-all" />

## Footer with Social Link

<PreviewWithCode relativePath="footer/footer-with-social-link.tsx" language="html-all" />

## Footer with Sitemap

<PreviewWithCode relativePath="footer/footer-with-sitemap.tsx" language="html-all" />

# Tailwind CSS Image Gallery - Material Tailwind

## Gallery Demo

<PreviewWithCode relativePath="gallery/gallery-demo.tsx" language="html-all" />

## Masonry Grid Gallery

<PreviewWithCode relativePath="gallery/masonry-grid-gallery.tsx" language="html-all" />

## Featured Image Gallery

<PreviewWithCode relativePath="gallery/featured-image-gallery.tsx" language="html-all" />

## Quad Gallery

<PreviewWithCode relativePath="gallery/quad-gallery.tsx" language="html-all" />

## Gallery With Tab

<PreviewWithCode relativePath="gallery/gallery-with-tab.tsx" language="html-all" />

# Tailwind CSS Icon Button - Material Tailwind

## Icon Button Demo

<PreviewWithCode relativePath="icon-button/icon-button-demo.tsx" language="html-all" />

## Icon Button Variants

<PreviewWithCode relativePath="icon-button/icon-button-variants.tsx" language="html-all" />

## Icon Button Sizes

<PreviewWithCode relativePath="icon-button/icon-button-sizes.tsx" language="html-all" />

## Icon Button Colors

<PreviewWithCode relativePath="icon-button/icon-button-colors.tsx" language="html-all" />

## Rounded Icon Button

<PreviewWithCode relativePath="icon-button/rounded-icon-button.tsx" language="html-all" />

## Icon Button As Link

<PreviewWithCode relativePath="icon-button/icon-button-as-link.tsx" language="html-all" />

## Custom Icon Button

<PreviewWithCode relativePath="icon-button/custom-icon-button.tsx" language="html-all" />

# Tailwind CSS Image Examples - Material Tailwind

## Image Demo

<PreviewWithCode relativePath="image/image-demo.tsx" language="html-all" />

## Image with Rounded Corners

<PreviewWithCode relativePath="image/image-with-rounded-corners.tsx" language="html-all" />

## Circular Image

<PreviewWithCode relativePath="image/circular-image.tsx" language="html-all" />

## Image with Shadow

<PreviewWithCode relativePath="image/image-with-shadow.tsx" language="html-all" />

## Image with Caption

<PreviewWithCode relativePath="image/image-with-caption.tsx" language="html-all" />

## Image with Blurred Caption

<PreviewWithCode relativePath="image/image-with-blurred-caption.tsx" language="html-all" />

# Tailwind CSS Input - Material Tailwind

## Input Demo

<PreviewWithCode relativePath="input/input-demo.tsx" language="html-all" />

## Input Sizes

<PreviewWithCode relativePath="input/input-sizes.tsx" language="html-all" />

## Input Color

<PreviewWithCode relativePath="input/input-colors.tsx" language="html-all" />

## Input with Validation

<PreviewWithCode relativePath="input/input-with-validation.tsx" language="html-all" />

## Input with Icon

<PreviewWithCode relativePath="input/input-with-icon.tsx" language="html-all" />

## Input with Label

<PreviewWithCode relativePath="input/input-with-label.tsx" language="html-all" />

## Input with Helper Text

<PreviewWithCode relativePath="input/input-with-helper-text.tsx" language="html-all" />

## Input with Button

<PreviewWithCode relativePath="input/input-with-button.tsx" language="html-all" />

## Input with Dropdown

<PreviewWithCode relativePath="input/input-with-dropdown.tsx" language="html-all" />

## Input Disabled

<PreviewWithCode relativePath="input/input-disabled.tsx" language="html-all" />

## Input Custom Styles

<PreviewWithCode relativePath="input/input-custom-styles.tsx" language="html-all" />

# Tailwind CSS List Examples - Material Tailwind

## List Demo

<PreviewWithCode relativePath="list/list-demo.tsx" language="html-all" />

## List with Icon

<PreviewWithCode relativePath="list/list-with-icon.tsx" language="html-all" />

## List with Avatar

<PreviewWithCode relativePath="list/list-with-avatar.tsx" language="html-all" />

## List with Badge

<PreviewWithCode relativePath="list/list-with-badge.tsx" language="html-all" />

## List with Selected Item

<PreviewWithCode relativePath="list/list-with-selected-item.tsx" language="html-all" />

## List with Disabled Item

<PreviewWithCode relativePath="list/list-with-disabled-item.tsx" language="html-all" />

## List with Link

<PreviewWithCode relativePath="list/list-with-link.tsx" language="html-all" />

## List Custom Styles

<PreviewWithCode relativePath="list/list-custom-styles.tsx" language="html-all" />

# Tailwind CSS Navbar - Material Tailwind

## Navbar Demo

<PreviewWithCode relativePath="navbar/navbar-demo.tsx" language="html-all" />

## Sticky Navbar

<PreviewWithCode relativePath="navbar/sticky-navbar.tsx" language="html-all" />

## Complex Navbar

<PreviewWithCode relativePath="navbar/complex-navbar.tsx" language="html-all" />

## Navbar with Search

<PreviewWithCode relativePath="navbar/navbar-with-search.tsx" language="html-all" />

## Dark Navbar

<PreviewWithCode relativePath="navbar/dark-navbar.tsx" language="html-all" />

## Simple Navbar

<PreviewWithCode relativePath="navbar/simple-navbar.tsx" language="html-all" />

## Navbar With Mega Menu

<PreviewWithCode relativePath="navbar/navbar-with-mega-menu.tsx" language="html-all" />

# Tailwind CSS Pagination - Material Tailwind

## Pagination Demo

<PreviewWithCode relativePath="pagination/pagination-demo.tsx" language="html-all" />

## Pagination Circular

<PreviewWithCode relativePath="pagination/pagination-circular.tsx" language="html-all" />

## Simple Pagination

<PreviewWithCode relativePath="pagination/simple-pagination.tsx" language="html-all" />

## Pagination Group

<PreviewWithCode relativePath="pagination/pagination-group.tsx" language="html-all" />

# Tailwind CSS Progress - Material Tailwind

## Progress Demo

<PreviewWithCode relativePath="progress/progress-demo.tsx" language="html-all" />

## Progress Sizes

<PreviewWithCode relativePath="progress/progress-sizes.tsx" language="html-all" />

## Progress Colors

<PreviewWithCode relativePath="progress/progress-colors.tsx" language="html-all" />

## Progress Label Inside

<PreviewWithCode relativePath="progress/progress-label-inside.tsx" language="html-all" />

## Progress Label Outside

<PreviewWithCode relativePath="progress/progress-label-outside.tsx" language="html-all" />

## Progress Custom Styles

<PreviewWithCode relativePath="progress/progress-custom-styles.tsx" language="html-all" />

# Tailwind CSS Radio Button - Material Tailwind

## Radio Button Demo

<PreviewWithCode relativePath="radio/radio-demo.tsx" language="html-all" />

## Radio Button Colors

<PreviewWithCode relativePath="radio/radio-colors.tsx" language="html-all" />

## Radio Button with Custom Icon

<PreviewWithCode relativePath="radio/radio-with-custom-icon.tsx" language="html-all" />

## Disabled Radio Button

<PreviewWithCode relativePath="radio/disabled-radio.tsx" language="html-all" />

## Radio Button with Link

<PreviewWithCode relativePath="radio/radio-with-link.tsx" language="html-all" />

## Radio Button With Description

<PreviewWithCode relativePath="radio/radio-with-description.tsx" language="html-all" />

## Radio Button Custom Styles

<PreviewWithCode relativePath="radio/custom-radio.tsx" language="html-all" />

# Tailwind CSS Rating - Material Tailwind

## Rating Demo

<PreviewWithCode relativePath="rating/rating-demo.tsx" language="html-all" />

## Rating Colors

<PreviewWithCode relativePath="rating/rating-colors.tsx" language="html-all" />

## Readonly Rating

<PreviewWithCode relativePath="rating/readonly-rating.tsx" language="html-all" />

## Custom Rating Icon

<PreviewWithCode relativePath="rating/custom-rating-icon.tsx" language="html-all" />

## Rating with Text

<PreviewWithCode relativePath="rating/rating-with-text.tsx" language="html-all" />

## Rating with Comment

<PreviewWithCode relativePath="rating/rating-with-comment.tsx" language="html-all" />

# Tailwind CSS Spinner - Material Tailwind

## Spinner Demo

<PreviewWithCode relativePath="spinner/spinner-demo.tsx" language="html-all" />

## Spinner Sizes

<PreviewWithCode relativePath="spinner/spinner-sizes.tsx" language="html-all" />

## Spinner Colors

<PreviewWithCode relativePath="spinner/spinner-colors.tsx" language="html-all" />

## Spinner Custom Styles

<PreviewWithCode relativePath="spinner/spinner-custom-styles.tsx" language="html-all" />

# Tailwind CSS Stepper Examples - Material Tailwind

## Stepper Demo

<PreviewWithCode relativePath="stepper/stepper-demo.tsx" language="html-all" />

## Stepper With Icon

<PreviewWithCode relativePath="stepper/stepper-with-icon.tsx" language="html-all" />

## Stepper With Dots

<PreviewWithCode relativePath="stepper/stepper-with-dots.tsx" language="html-all" />

## Stepper With Content

<PreviewWithCode relativePath="stepper/stepper-with-content.tsx" language="html-all" />

## Stepper Custom Styles

<PreviewWithCode relativePath="stepper/stepper-custom-styles.tsx" language="html-all" />

# Tailwind CSS Switch - Material Tailwind

## Switch Demo

<PreviewWithCode relativePath="switch/switch-demo.tsx" language="html-all" />

## Switch Checked

<PreviewWithCode relativePath="switch/switch-checked.tsx" language="html-all" />

## Switch Colors

<PreviewWithCode relativePath="switch/switch-colors.tsx" language="html-all" />

## Switch with Label

<PreviewWithCode relativePath="switch/switch-with-label.tsx" language="html-all" />

## Disabled Switch

<PreviewWithCode relativePath="switch/disabled-switch.tsx" language="html-all" />

## Switch with Link

<PreviewWithCode relativePath="switch/switch-with-link.tsx" language="html-all" />

## Switch With Description

<PreviewWithCode relativePath="switch/switch-with-description.tsx" language="html-all" />

## Switch Custom Styles

<PreviewWithCode relativePath="switch/custom-switch.tsx" language="html-all" />

# Tailwind CSS Table Examples - Material Tailwind

## Table Demo

<PreviewWithCode relativePath="table/table-demo.tsx" language="html-all" />

## Table With Striped Row

<PreviewWithCode relativePath="table/table-with-striped-row.tsx" language="html-all" />

## Table With Striped Column

<PreviewWithCode relativePath="table/table-with-striped-column.tsx" language="html-all" />

## Transaction Table

<PreviewWithCode relativePath="table/transactions-table.tsx" language="html-all" />

## Members Table

<PreviewWithCode relativePath="table/members-table.tsx" language="html-all" />

## Sortable Table

<PreviewWithCode relativePath="table/sortable-table.tsx" language="html-all" />

# Tailwind CSS Textarea - Material Tailwind

## Textarea Demo

<PreviewWithCode relativePath="textarea/textarea-demo.tsx" language="html-all" />

## Textarea Sizes

<PreviewWithCode relativePath="textarea/textarea-sizes.tsx" language="html-all" />

## Textarea Color

<PreviewWithCode relativePath="textarea/textarea-colors.tsx" language="html-all" />

## Textarea with Validation

<PreviewWithCode relativePath="textarea/textarea-with-validation.tsx" language="html-all" />

## Textarea with Label

<PreviewWithCode relativePath="textarea/textarea-with-label.tsx" language="html-all" />

## Textarea with Helper Text

<PreviewWithCode relativePath="textarea/textarea-with-helper-text.tsx" language="html-all" />

## Textarea Disabled

<PreviewWithCode relativePath="textarea/textarea-disabled.tsx" language="html-all" />

## Comment Box with Textarea

<PreviewWithCode relativePath="textarea/comment-box-with-textarea.tsx" language="html-all" />

## Chatbox with Textarea

<PreviewWithCode relativePath="textarea/chatbox-with-textarea.tsx" language="html-all" />

# Tailwind CSS Timeline - Material Tailwind

## Timeline Demo

<PreviewWithCode relativePath="timeline/timeline-demo.tsx" language="html-all" />

## Timeline with Icon

<PreviewWithCode relativePath="timeline/timeline-with-icon.tsx" language="html-all" />

## Timeline with Avatar

<PreviewWithCode relativePath="timeline/timeline-with-avatar.tsx" language="html-all" />

## Activities Timeline

<PreviewWithCode relativePath="timeline/activities-timeline.tsx" language="html-all" />

# Tailwind CSS Typography - Material Tailwind

## Headings

<PreviewWithCode relativePath="typography/headings.tsx" language="html-all" />

## Paragraph

<PreviewWithCode relativePath="typography/paragraph.tsx" language="html-all" />

## Lead Paragraph

<PreviewWithCode relativePath="typography/lead-paragraph.tsx" language="html-all" />

## Small Text

<PreviewWithCode relativePath="typography/small-text.tsx" language="html-all" />

## Typography Colors

<PreviewWithCode relativePath="typography/typography-colors.tsx" language="html-all" />

# Tailwind CSS Video - Material Tailwind

## Video Demo

<PreviewWithCode relativePath="video/video-demo.tsx" language="html-all" />

## Video Autoplay

<PreviewWithCode relativePath="video/video-autoplay.tsx" language="html-all" />

## Video Muted

<PreviewWithCode relativePath="video/video-muted.tsx" language="html-all" />

